<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />  -->
	<title>My Tetris</title>
	<link rel="stylesheet" href="css/tetris.css">
	<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>

<body>
	<div class="container">
		<div class="row">
			<div id="info">
				<div id="greeting"></div>
				<div id="tips">
					<p>Tips:</p>
					<p><kbd>W</kbd><label> ration</label></p>
					<p><kbd>A</kbd><label> left</labe></p>
					<p><kbd>S</kbd><label> down</label></p>
					<p><kbd>D</kbd><label> right</label></p>
				</div>
			</div>
			<div id="map">
				<!-- sorted blocks area -->
			</div>
			<div id="bellow">
				<div id="record">
					<div><label class="rd_lab" for="scores">SCORE</label><input class="points" type="text" readonly="true" id="scores" disabled="true" ></div>
					<div><label class="rd_lab" for="levels">LEVEL</label><input class="points" type="text" readonly="true" id="levels" disabled="true" placeholder="1"></div>
				</div>
				<div class="pannel">
					<audio loop="loop" id="Background-AudioPlayer" src="audio/background.mp3" type="audio/mp3"></audio>
					<audio id="GameOver-AudioPlayer" src="audio/gameover.ogg" type="audio/ogg"></audio>
					<audio id="Score-AudioPlayer" src="audio/score.mp3" type="audio/mp3"></audio>
				</div>
				<div id="botm">
					<div id="command">
						<button class="cmd btn" id="startBtn"><i class="fa fa-play" aria-hidden="true"></i></button>
						<button class="cmd btn" id="pauseBtn"><i class="fa fa-pause" aria-hidden="true"></i></button>
						<button class="cmd btn" id="resumeBtn"><i class="fa fa-step-forward" aria-hidden="true"></i></button>
						<button class="cmd btn" id="endBtn"><i class="fa fa-stop" aria-hidden="true"></i></button>
					</div>
					<div id="aspect">
						<button class="aspect btn"><i class="fa fa-arrow-left" aria-hidden="true"></i></button>
						<button class="aspect btn"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>
						<button class="aspect btn"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
						<button class="aspect btn"><i class="fa fa-arrow-down" aria-hidden="true"></i></button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/simple_jquery.js"></script>
	<script type="text/javascript" src="js/tetris.js"></script>
	<script type="text/javascript" src="js/ban_scale.js"></script>
</body>

</html>